<template>
  <Page name="确认支付">
    <section>
      <div class="detail">
        <div class="total-box fxv-center">
          <div class="label">代付金额</div>
          <div class="total fx">
            <div class="price flex">{{amount[0]}}</div>
            <div class="currency">{{amount[1]}}</div>
          </div>
        </div>
      </div>
      <div class="list-item mt20">
        <div class="item">
          <div class="left">订单信息</div>
          <div class="right">代付</div>
        </div>
        <div class="item">
          <div class="left">付款方式</div>
          <div class="right">
            <div class="fx fx-vc fx-end" @click="showActionSheet = true">
              <span class="mr12">乐钱包</span>
              <i class="css-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="btn-box">
        <button class="btn btn-primary btn-block" @click="submit">立即支付</button>
      </div>
    </section>

    <ActionSheet v-if="showActionSheet" title="选择优先支付方式" :list="pay_ids" :value="pay_id" @close="showActionSheet = false"
      @select="(item)=>{this.pay_id = item.value}" />

    <Keyboard
      v-if="showKeyboard"
      type="replace_pay"
      title="密码支付"
      label="请输入支付密码"
      :loading="posting"
      :params="{
        order_id:this.order_id,
        shop_id:this.shop_id,
        payer_uid:this.payer_uid,
        pay_type:this.pay_id
      }"
      @success="success"
      @close="showKeyboard = false" />
  </Page>
</template>

<script>
  import Page from '~/components/page';
  import ActionSheet from '~/components/ActionSheet';
  import Keyboard from '~/components/Keyboard'

  export default {
    components: {
      Page,
      ActionSheet,
      Keyboard
    },
    validate({
      query
    }) {
      // 如果userInfo , form为空，表示没有经过上一步操作非法进入页面
      return !!query.id;
    },
    async asyncData({ app, query, store}) {

      let pay_ids = [];
      let pay_id = '1';

      try {
        //付款顺序
        await store.dispatch('GET_PAY_SEQ');

        let pay_seq = store.state.paySeq;
        //重组适合actionsheet的数组
        pay_ids = store.state.paySeq.pay_ids.map(item=>{
          let rs = {
            value:item.key,
            label:item.text,
          }
          if(item.status == '0'){
            rs.disabled = true;
            rs.disabledText = '暂未开通'
          }
          return rs
        })
        //获取第一个激活的选中状态
        let item = store.state.paySeq.pay_ids.find(item=>item.status == '1');
        if(item){
            pay_id = item.key
        }
        // pay_ids = pay_ids.concat({
        //   type: 'link',
        //   link: "/elsepay",
        //   label: '找人代付',
        // })
      }catch(e){
        app.$error(e);
      }
      return {
        pay_ids,
        pay_id,
      }
    },
    data() {
      return {
        posting:false,
        showActionSheet: false,
        showKeyboard: false,
        amount:this.$utils.getUrlKey("amount"),
        order_id:this.$utils.getUrlKey("id"),
        shop_id:this.$utils.getUrlKey("shop_id"),
        payer_uid:this.$utils.getUrlKey("payer_uid"),
      }
    },
    computed:{
      user(){
        return this.$store.state.user
      }
    },
    methods: {
      submit() {
        if (this.showKeyboard) return false;
        this.showKeyboard = true;
        return false;
      },
      success(data) {
        data.amount = this.$utils.getUrlKey("amount");
        data.info = '代付';
        this.$store.commit('pay/setStatus', data);
        this.$router.push({path:'/pay/status'});
      }
    },
    mounted() {
      //console.log(query)
      this.amount = this.$utils.getUrlKey("amount").split(" ");
    },
  }

</script>

<style lang="less" scoped>
  .detail {
    padding: 0 30px 30px 30px;
    background-color: #fff;

    .total-box {
      height: 250px;

      .total {
        color: #292929;
        align-items: flex-end;
        max-width: 100%;

        .price {
          font-size: 60px;
          text-align: right;
          .text-ellipsis();
        }

        .currency {
          flex-shrink: 0;
          flex-grow: 0;
          margin-left: 14px;
          font-size: 30px;
        }
      }

      .label {
        margin-bottom: 40px;
        font-size: 28px;
        color: #999;
      }
    }

    .card {
      padding: 26px 50px;
      background-color: #fff;
      border: 1px solid #edeef0;
      border-radius: 10px;

      .info {
        img {
          display: block;
          width: 48px;
          height: 48px;
        }

        p {
          margin: 0 20px;
          font-size: 32px;
          color: rgb(41, 41, 41);
          .text-ellipsis();
        }

        span {
          font-size: 32px;
          color: rgb(240, 85, 33);
          .text-ellipsis();

        }
      }

      .tip {
        margin-top: 26px;
        font-size: 24px;
        line-height: 36px;
        color: rgb(211, 155, 0);
      }
    }
  }

  .btn-box {
    margin: 60px 30px;
  }

  .list-item {
    .left {
      color: #292929;
      font-size: 32px;
    }

    .right {
      color: #292929;
      font-size: 30px;
    }
  }

</style>
